<div class="tlp-framed-vertically">
    {{# header }}
        {{> admin-header }}
    {{/ header }}

    <div class="tlp-framed-horizontally" id="siteadmin-statistics-disk-usage-top-users">
        <section class="tlp-pane" id="siteadmin-statistics-disk-usage-top-users-search">
            <div class="tlp-pane-container">
                <div class="tlp-pane-header">
                    <h1 class="tlp-pane-title"><i class="fa fa-search tlp-pane-title-icon"></i> {{ search_title }}</h1>
                </div>

                <div class="tlp-pane-section">
                    <form method="GET" action="disk_usage.php" name="top_users">
                        <input type="hidden" name="menu" value="top_users">
                        <div class="tlp-form-element">
                            <label for="date" class="tlp-label">{{ end_date_label }}</label>
                            <div class="tlp-form-element tlp-form-element-prepend">
                                <input
                                    type="text"
                                    id="end_date"
                                    name="end_date"
                                    class="tlp-input tlp-input-date"
                                    size="11"
                                    value="{{ end_date_value }}"
                                >
                                <span class="tlp-prepend"><i class="fa fa-calendar"></i></span>
                            </div>
                        </div>

                        <button type="submit" class="tlp-button-primary tlp-button-wide">
                            <i class="fa fa-search tlp-button-icon"></i> {{ search }}
                        </button>
                    </form>
                </div>
            </div>
        </section>

        <section class="tlp-pane" id="siteadmin-statistics-disk-usage-top-users-data">
            <div class="tlp-pane-container">
                <div class="tlp-pane-header">
                    <div class="tlp-pane-title">
                        {{ top_users_pane_title }}
                    </div>
                </div>

                <section class="tlp-pane-section">
                    <table class="tlp-table">
                        <thead>
                            <tr>
                                <th class="tlp-table-cell-numeric">{{ table_rank_title }}</th>
                                <th>{{ table_name_title }}</th>
                                <th class="tlp-table-cell-numeric siteadmin-statistics-disk-usage-top-users-end-size-cell">{{ table_end_size_title }}</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                        {{# data_top_users }}
                            <tr>
                                <td class="tlp-table-cell-numeric">{{ rank }}</td>
                                <td class="siteadmin-statistics-disk-usage-top-users-username-cell">
                                    <a href="{{ user_details_url }}">
                                        {{ user_name }}
                                    </a>
                                </td>
                                <td class="tlp-table-cell-numeric siteadmin-statistics-disk-usage-top-users-end-size-cell">{{ end_size }}</td>
                                <td class="tlp-table-cell-actions">
                                    <a class="tlp-table-cell-actions-button tlp-button-small tlp-button-primary tlp-button-outline" href="{{ disk_usage_user_details_url }}">
                                        <i class="fa fa-area-chart tlp-button-icon"></i> {{ disk_usage_user_details_btn }}
                                    </a>
                                </td>
                            </tr>
                        {{/ data_top_users }}
                        {{^ data_top_users }}
                            <tr>
                                <td colspan="4" class="tlp-table-cell-empty">
                                    {{ no_data }}
                                </td>
                            </tr>
                        {{/ data_top_users }}
                        </tbody>
                    </table>
                </section>
            </div>
        </section>
    </div>
</div>
